<template>
<div class="patient-case-list">
    <el-row style="width: 100%">
            <el-col :md="24" :lg="24">
                <section class="wt-header" style="padding:0">
                    <a><h3>{{patientInfo.name}}</h3></a><span></span><span>出生日期：{{patientBirthday}}</span><span>病案号：{{patientInfo.clinicNumber}}</span>
                    <!-- <el-tag
                            type="primary"
                            v-for="tag in info.caseName"
                            :key="tag"
                    >{{tag}}</el-tag> -->
                    <div class="rightButtons" v-if="true">
                        <el-button
                                @click="editCase"
                                icon="el-icon-edit">修改患者基本信息</el-button>
                        <el-button icon="el-icon-plus" @click="newpatient">新建患者病例</el-button>
                    </div>
                </section>
            </el-col>
			</el-row>
			<el-row>
				<wt-paged-table ref="table" v-loading="cutting"
				countParam="totalElements"
				resultParam="content"
				size-param="page_size" page-param="page_index"
				filter-param="patient_id"
				:extra-params="extraParam"
				:fetch="getAllCases"
				:refresh="true"
				:filter="classify"   @page-loaded="onPageLoaded">
					<wt-case-table :list="pageData">
					</wt-case-table>
				</wt-paged-table>
    </el-row>
	</div>
</template>
<script>
import Vue from "vue";
import WtPagedTable from "winged/components/wt-paged-table";
import wtCaseTable from "../../componentsWithData/case-list-table";
import Permission from "winged/utils/wt-permission";
import DateFormat from "winged/utils/wt-time-utils";
import { getAllCases, getUser } from "../../utils/actions";

export default {
	components: {
		[WtPagedTable.name]: WtPagedTable,
		[wtCaseTable.name]: wtCaseTable
	},
	name: "wt-case-list",
	props: {
		page: {
			type: Number,
			default: 0
		},
		// 用于请求查询的额外参数数据，通常是_token
		extraParams: {
			type: Object,
			default: () => {}
		},
		patientId: {
			type: [String, Number],
			required: true
		},
		info: {
			type: Object,
			default: function() {
				return {};
			}
		},
		filterParam: {
			type: String,
			default: ""
		},
		multiSelect: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			getAllCases,
			visible: false,
			// 当前页的列表数据
			pageData: [],
			patientInfo: {},
			classify: this.patientId, //根据patient过滤的条件
			method: "POST",
			cutting: false,
			extraParam: {
				// patient_id: "5a9d0a9294df1700065ef963",
				// id: ""
			},
			allowEdit: Permission.checkPermission("patient-case-add"),
			allowRemove: Permission.checkPermission("patient-case-delete")
		};
	},
	computed: {
		patientBirthday() {
			return DateFormat.format(this.patientInfo.birthday, "date");
		}
	},
	mounted() {},
	methods: {
		load() {
			getUser(this.patientId)
				.then(res => {
					res = _.isString(res) ? JSON.parse(res) : res;
					this.patientInfo = res.patientInfo;
					console.log("patient-info", this.patientInfo);
				})
				.catch(err => {
					this.$message.error("获取用户信息失败");
				});
		},
		newpatient() {
			this.$router.push({ path: `/case/create/${this.patientId}` });
		},
		ensure() {
			//跳转页面
			let patientId = 111111;
			let path = patientId
				? `/patient/create/${patientId}`
				: `/patient/create`;
			this.$router.push({ path });
		},
		onPageLoaded: function(data) {
			this.pageData = data;
		},
		cut: function() {
			this.$refs.table.load();
		},
		editCase() {
			this.$router.push({ path: `/patient/edit/${this.patientId}` });
		}
	},
	created() {
		this.load();
	}
};
</script>
<style scoped>
.button-div {
	padding-bottom: 15px;
	float: right;
}
.caseid {
	color: #999;
	float: left;
	margin-top: 10px;
	line-height: 21px;
	margin-left: 5px;
}
.table {
	width: 65%;
}
.table th {
	width: 30%;
	text-align: left;
}
.table td {
	width: 30%;
	text-align: left;
}
.basic {
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin-bottom: 10px;
}
.six {
	margin-right: 2em;
}
.wt-header {
	width: 100%;
	display: block;
	margin: 0 0 10px 0;
}
.wt-header > * {
	display: inline-block;
	vertical-align: middle;
	margin: 4px 0 4px 0;
}
.wt-header h3 {
	margin: 0;
}
.wt-header span {
	margin-left: 10px;
}
.rightButtons {
	float: right;
	margin-top: 0;
}
</style>